<template>
	<!-- 确认订单 -->
	<div class="cart">
		<receiving-address :addressData="addressData"></receiving-address>
		<el-table ref="multipleTable" :data="orderDate" stripe:true tooltip-effect="dark"
			style="width: 100%;margin-top: 20px;" :reserve-selection="true" :row-key="(row) => { return row.id }"
			:row-class-name="rowClassName">
			<div slot="empty" style="text-align: left;">
				<el-empty description="暂无信息" />
			</div>
			<el-table-column label="商品信息">
				<template slot-scope="scope">
					<div class="goods">
						<img :src="$store.state.imgShowRoad2 + '/file/' + scope.row.FarmInfo.shopPicture" alt="" />
						<div class="info">
							<div class="title">{{ scope.row.FarmInfo.farmName }}</div>
							<div class="spec-cart">规格：{{ scope.row.SpecInfo.znSpecTitle }}</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="单价(元)" width="120">
				<template slot-scope="scope">
					<p class="price">￥{{ scope.row.SpecInfo.znSpecPrice }}</p>
				</template>
			</el-table-column>
			<el-table-column label="金额(元)" width="120">
				<template slot-scope="scope">
					<p class="price">{{ totalprice}}</p>
				</template>
			</el-table-column>
			<el-table-column label="数量" width="180">
				<template slot-scope="scope">
					<el-input-number v-model="count" @change="handleChange($event,scope.row)" :min="1" :max="1000000000"
						style="width:120px;"></el-input-number>
				</template>
			</el-table-column>
		</el-table>
		<div class="submit">
			<div class="total-price">
				<span>应付金额:{{ totalprice }}</span>
			</div>
			<el-button type="danger" @click="payment" class="place-order">提交订单</el-button>
		</div>
	</div>
</template>

<script>
	import ReceivingAddress from "@/components/foreground/ReceivingAddress.vue";
	import addressApi from "@/api/address.js";
	import orderApi from "@/api/order.js"
	export default {
		components: {
			ReceivingAddress
		},
		data() {
			return {
				orderDate: [],
				totalprice: 0,
				addressData: [],
				count: null,
			}
		},
		computed: {

		},
		methods: {
			async payment() {
				let farmInfoObject = {};
				let specInfoObject = {};
				for (let item of this.orderDate) {
					let farmInfo = item.FarmInfo;
					let specInfo = item.SpecInfo;
					Object.assign(farmInfoObject, farmInfo);
					Object.assign(specInfoObject, specInfo);
				}
				let orderDto = {
					addressId: this.addressData.addressId,
					totalPrice: this.totalprice,
					count: this.count,
					farmInfo: farmInfoObject,
					specInfo: specInfoObject
				}
				console.log("orderDto", orderDto)
				const res = await orderApi.submitOrder(`/znOrder/submitOrder`, orderDto)
					.then((res) => {
						this.$message({
							message: "提交成功，请前往我的订单查看",
							type: 'success'
						});
						this.totalprice = ''
						localStorage.removeItem("FarmInfo")
						localStorage.removeItem("count")
						this.$router.push({ path: `/FarmPage` })
					})
					.catch((err) => {
						this.$message.error(res.msg);
					});
			},
			async defaultAddress() { //默认地址
				const res = await addressApi.defaultAddress('/znDeliveryAddress/defaultAddress');
				if (res.code == 200) {
					this.addressData = res.data;
				}
			},
			//获取当前的行数
			rowClassName({
				row,
				rowIndex
			}) {
				//把每一行的索引放进row
				row.index = rowIndex;
			},
			handleChange(val, row) {
				console.log("val", val)
				console.log("row", row)
				this.totalprice = (val * row.SpecInfo.znSpecPrice).toFixed(2);
				localStorage.setItem("count", val);
			},
			calculateTotalPrice() {
				this.totalprice = this.orderDate.reduce((total, item) => {
					return total + (item.SpecInfo.znSpecPrice * this.count);
				}, 0).toFixed(2);
			}
		},
		created() {
			this.orderDate = JSON.parse(localStorage.getItem("FarmInfo"));
			this.count = JSON.parse(localStorage.getItem("count"));
			this.defaultAddress();
			this.calculateTotalPrice();
		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		width: 1100px;
		margin: 10px auto;
		background: #fff;
		padding: 10px 20px;

		.goods {
			width: 500px;

			img {
				float: left;
				width: 150px;
				height: 100px;
				margin-right: 10px;
				border-radius: 6px;
			}

			.info {
				// float: left;
				height: 100px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					margin: 0;
					font-size: 16px;
					/*超出的部分隐藏*/
					overflow: hidden;
					/*文字用省略号替代超出的部分*/
					text-overflow: ellipsis;
					/*弹性伸缩盒子模型显示*/
					display: -webkit-box;
					/*限制在一个块元素显示文本的行数*/
					-webkit-line-clamp: 2;
					/*设置或检索伸缩盒对象的子元素排列方式*/
					-webkit-box-orient: vertical;
				}

				.spec-cart {
					margin: 0;
					font-size: 12px;
				}
			}
		}

		.price,
		.subtotal {
			color: red;
		}

		.count {
			.itxt {
				width: 40px;
				height: 30px;
				margin: 0 10px;
			}

			button {
				display: inline-block;
				width: 20px;
				height: 20px;
				padding: 0;
				text-align: center;
				line-height: 20px;
				border: 1px solid darkgray;
				font-size: 20px;
			}
		}

		.cancle {
			float: left;
		}

		.submit {
			margin-top: 20px;
			float: right;
			width: 300px;
			height: 40px;

			.total-price {
				font-size: 20px;
				float: left;
				color: red;
				// margin-right: 50px;
				line-height: 40px;
			}

			.place-order {
				float: right;
			}
		}
	}

	.delete-bar {
		width: 60px;
		height: 30px;
		padding: 0;

		span {
			margin: 0;
		}
	}
</style>